<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .yjlb{
         margin: 100px 300px;
        }
        a{
            color: white;
            font-size: 18px;
            text-decoration: none;
        }
        li{
             list-style: none;
        }
         .lb li{
            width: 120px;
            height: 40px;
            position: relative;
            line-height: 30px;
            border: 1px solid white;
            background-color: #74ADAA;
            list-style: none;
            text-align: center;
            float: left;
            transform-style: preserve-3d;
            transition: all 0.5s;
        }
         span{
            width: 120px;
            height: 40px;
            position: absolute;
            top: 30px;
            left: 0px;
            color: white;
            font-size: 18px;
            background-color: #74ADAA;
            display: inline-block;
            transform: rotate3d(1,0,0,270deg);
        }
         .lb li:hover{
            transform: rotate3d(1,0,0,90deg);
            background-color: gold;
            display: inline-block;
        }
        </style>
        </head>
        <body>
         <div class="yjlb ">
         <ul class="lb">
        <li><a href="#">Home</a><span class="span">Home</span></li>
        <li><a href="#">Services</a><span class="span">Services</span></li>
        <li><a href="#">Products</a><span class="span">Products</span></li>
        <li><a href="#">About</a><span class="span">About</span></li>
        <li><a href="#">Contact</a><span class="span">Contact</span></li>
        <li class="ba"><a href="#">Blog</a><span class="span">Blog</span></li>
        <br><br><li><a href="#">Shop On-Line</a><span class="span">Shop On-Line</span></li>
        </ul>
        </div>
</body>
</html>